import React, { Component, Fragment } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import { Form } from '@ant-design/compatible';
import PageHeader from '@/components/PageHeader';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import { Card, Table } from 'antd';

import '@ant-design/compatible/assets/index.css';

interface BrokenDetailProps extends FormComponentProps {
  dispatch: Dispatch;
  dataInfo: any;
  location: { query: any };
}

interface BrokenDetailState {
  rowId:number;
  searchValues: any;
}

@connect(({ brokenDetail: { dataInfo } }: any) => ({ dataInfo }))

class BrokenDetailElem extends Component<BrokenDetailProps, BrokenDetailState> {
  columns = [
    { title: '序号', dataIndex: 'index' },
    { title: '断网时间', dataIndex: 'startTime' },
    {
      title: '持续时长(秒)',
      render: (val: any, row: any) => {
        const endTime = row.endTime ? new Date(row.endTime).getTime() : new Date().getTime();
        const startTime = new Date(row.startTime).getTime();
        const length = endTime - startTime;
        return `${Math.floor(length / 1000)} s`;
      },
    },
    {
      title: '恢复时间',
      dataIndex: 'endTime',
      render: (text: any) => text || 'None',
    },
  ];

  state: BrokenDetailState = {
    rowId: 0,
    searchValues: {
      startTime: '',
      endTime: '',
      code: '',
      pageIndex: 1,
      pageSize: 20,
    },
  };

  componentDidMount() {
    const { searchValues } = this.state;
    const {
      location: {
        query: { startTime, endTime, code },
      },
    } = this.props;
    const params = {
      ...searchValues,
      startTime,
      endTime,
      code,
    };
    this.setState({ searchValues: params }, () => this.fetchAction('fetch', params));
  }

  onSelectChange = (pageIndex: number, pageSize: number) => {
    const { searchValues } = this.state;
    const params = {
      ...searchValues,
      pageIndex,
      pageSize,
    };
    this.setState({ searchValues: params }, () => this.fetchAction('fetch', params));
  };

  onClickRow = ({ id }: any) => ({
    onClick: () => {
      this.setState({ rowId: id });
    },
  })

  setRowClassName = ({ id }: any) => {
    const { rowId } = this.state;
    return id === rowId ? 'clickRowStyl' : '';
  }

  fetchAction = (typeName: string, payload: any = {}) => {
    const { dispatch } = this.props;
    const type = typeName.indexOf('common') >= 0
      ? typeName : `brokenDetail/${typeName}`;
    dispatch({ type, payload });
  };

  render() {
    const { searchValues: { pageIndex, pageSize } } = this.state;
    const { dataInfo } = this.props;

    const dataSource = dataInfo
      ? dataInfo.list.map((item: any, index: number) => ({
        ...item,
        index: index + 1,
      }))
      : [];

    const pagination: object = {
      total: dataInfo ? dataInfo.count : 0,
      current: pageIndex,
      pageSize,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ['10', '20', '50', '100'],
      showTotal: () => `共${dataInfo.count || 0}条数据`,
      onChange: this.onSelectChange,
      onShowSizeChange: this.onSelectChange,
    };

    return (
      <Fragment>
        <PageHeader />

        <Card bordered={false}>
          <Table
            rowKey="id"
            className="statementTable"
            columns={this.columns}
            dataSource={dataSource}
            pagination={pagination}
            onRow={this.onClickRow}
            rowClassName={this.setRowClassName}
          />
        </Card>
      </Fragment>
    );
  }
}

export default Form.create<BrokenDetailProps>()(BrokenDetailElem);
